<template name="admin_home">
  <view class="">
      
    <div class="dashboard-container">
		<!-- 核心指标概览 -->
		<div class="section-card order-statistics">
			<div class="section-header">
				<h3>核心指标概览 
					<text class="info-icon" @tap="showInfo('说明', '刷新顶部核心指标概览')">?</text>
				</h3>
				<i class="refresh-icon" @click="loadOrderStatistics" title="刷新顶部核心指标概览">↻</i>
			</div>
			<div class="data-summary">
				<div class="stat-item" v-for="(item, index) in summaryData" :key="index">
					<div class="stat-value">{{ item.value }}</div>
					<div class="stat-title">{{ item.title }}</div>
					<div class="stat-trend" v-if="item.trend">{{ item.trend }}</div>
				</div>
			</div>
		</div>
		<!-- 订单统计分析 -->
		<div class="section-card order-statistics">
			<div class="section-header">
				<h3>订单统计分析 <text class="info-icon" @tap="showInfo('说明', '查看不同时间范围的订单统计数据')">?</text></h3>
				<div class="time-range-selector">
					<select v-model="orderStatsRange" @change="loadOrderStatistics">
						<option value="today">今日</option>
						<option value="yesterday">昨日</option>
						<option value="month">本月</option>
						<option value="all">历史总计</option>
					</select>
					<i class="refresh-icon" @click="loadOrderStatistics" title="刷新订单统计数据">↻</i>
				</div>
			</div>
		  
			<div class="order-stats-container">
				<div class="stat-item" @click="openOrderPages(1)">
					<div class="stat-label">订单总数</div>
					<div class="stat-value" >{{ orderStats.total_orders }}</div>
				</div>
				<div class="warning-card" @click="openOrderPages(2)">
					<div class="stat-label"  >异常订单</div>
					<div class="stat-value">{{ orderStats.price_abnormal_orders }}</div>
					<div class="warning-desc">存在利润低于5%的订单</div>
				</div>
				<div class="stat-item">
					<div class="stat-label" >销售额</div>
					<div class="stat-value">¥{{ (orderStats.total_sales) }}</div>
				</div>
				<div class="stat-item">
					<div class="stat-label">平均订单额</div>
					<div class="stat-value">¥{{ orderStats.avg_order_value }}</div>
				</div>
				<div class="stat-item">
					<div class="stat-label">活跃客户数</div>
					<div class="stat-value">{{ orderStats.active_customers }}</div>
				</div>
			</div>
		</div>
		
		<!-- 区分销售类型 -->
		<div class="section-card order-statistics">
			<div class="section-header">
				<view class="h3">订单类型 <text class="info-icon" @tap="showInfo('说明', '')">?</text></view>
				
				<div class="time-range-selector">
					<picker class="picker" :range="orderStatusTypeOptions" @change="orderStatusTypeRangeChange" :value="orderStatusTypeCurrent">
						<text>{{orderStatusTypeOptions[orderStatusTypeCurrent]}}</text>
					</picker>
					<i class="refresh-icon" @click="loadOrderStatusType" title="刷新数据">↻</i>
				</div>
				
			</div>
		  
			<div class="order-status-container">
				<div class="percentage-bar">
					<div class="bar-fill" style="background-color: #F56C6C;" :style="{ 
				   width: orderStatusType.order_status_1_count > 0 ? ((orderStatusType.order_status_1_count / orderStatusType.sum) * 100) + '%':0 }"></div>
					<span class="percentage-text" style="color: #fff;">
					自助下单占比{{ (orderStatusType.order_status_1_count > 0 ? (orderStatusType.order_status_1_count / orderStatusType.sum * 100).toFixed(1) : 0) }}%(自助：{{orderStatusType.order_status_1_count}}单 / 后台：{{orderStatusType.order_status_0_count}}单)
					</span>
				</div>
			</div>
		</div>
		
		<!-- 线路销售分布 库存健康度 -->
		<div class="main-content">
			<!-- 线路销售分布 -->
			<div class="section-card category-sales">
				<div class="section-header">
					<h3 >线路销售分布 
						<text class="info-icon" @tap="showInfo('说明', '分析不同商品类别的销售表现和占比')">?</text>
					</h3>
					<div class="time-range-selector">
						<select v-model="currentTimeRange.value" @change="loadRouteSales">
							<option value="today">今日</option>
							<option value="yesterday">昨日</option>
							<option value="month">本月</option>
							<option value="quarter">最近三个月</option>
							<option value="all">历史合计</option>
						</select>
					</div>
				   
				   
					<!-- 汇总信息 -->
					<view class="summary-card">
						<view class="summary-item">
							<text class="label">线路总数</text>
							<text class="amount">{{ summary.total_routes }}</text>
						</view>
						<view class="summary-item">
							<text class="label">总销售额</text>
							<text class="amount">¥{{ summary.total_sales }}</text>
						</view>
						<view class="summary-item">
							<text class="label">总订单数</text>
							<text class="amount">{{ summary.total_orders }}</text>
						</view>
					</view>
				
					<!-- 排序选项 -->
					<view class="sort-options">
						<text 
							:class="['sort-option', {'active': sortField === 'total_sales'}]"
							@click="changeSort('total_sales')"
						>
							销售额 {{ sortField === 'total_sales' ? (sortOrder === 'DESC' ? '↓' : '↑') : '' }}
						</text>
						<text 
							:class="['sort-option', {'active': sortField === 'order_count'}]"
							@click="changeSort('order_count')"
						>
							订单数 {{ sortField === 'order_count' ? (sortOrder === 'DESC' ? '↓' : '↑') : '' }}
						</text>
						<text 
							:class="['sort-option', {'active': sortField === 'customer_count'}]"
							@click="changeSort('customer_count')"
						>
							客户数 {{ sortField === 'customer_count' ? (sortOrder === 'DESC' ? '↓' : '↑') : '' }}
						</text>
					</view>
				
					<div  class="link" style="color:#0437ff"
					@click="$refs.showRouteSalesDetail.open()"
					>详细数据</div>
					
					
					<i class="refresh-icon" @click="loadRouteSales" title="刷新线路销售分布">↻</i>
				</div>
				
				<!-- 线路销售分布图表 -->
				<view class="chart-container">
					<qiun-data-charts type="pie" :opts="routeSalesChartOpts" :chartData="routeSalesChartData" />
				</view>
				
				
				<uni-popup ref="showRouteSalesDetail" height="auto" width="auto" type="center" title="线路销售分布图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								<table class="sales-table">
								<thead>
								   <tr>
									 <th>序号</th>
									 <th>线路</th>
									 <th>销售额</th>
									 <th>订单数</th>
									 <th>客户数</th>
									 <th>占比</th>
								   </tr>
								</thead>
								<tbody>
									<tr v-for="(route, index) in routes" :key="index">
										<td>{{ index+1 }}</td>
										<td>{{ route.route_name || 0 }}</td>
										<td>¥{{ route.total_sales || 0 }}</td>
										<td>{{ route.order_count || 0 }}</td>
										<td>{{ route.customer_count || 0 }}</td>
										<td>
											<div class="percentage-bar">
												<div class="bar-fill" :style="{ 
											   width: route.total_sales > 0 ? ((route.total_sales / summary.total_sales) * 100) + '%':0 }"></div>
												<span class="percentage-text">
												{{ (summary.total_sales > 0 ? (route.total_sales / summary.total_sales * 100).toFixed(1) : 0) }}%
												</span>
											</div>
										</td>
									</tr>
								 </tbody>
							</table>
								
							</view>
						</view>
					</view>
				</uni-popup>
				
			</div>
			
			<!-- 库存健康度 -->
			<div class="section-card order-statistics">
				<div class="section-header">
					<h3>库存健康度 
						<text class="info-icon" @tap="showInfo('说明', '评估库存状态，包括周转率、低库存和滞销商品')">?</text>
					</h3>
					<div  class="link" style="color:#0437ff"
					@click="$refs.showInventoryHealthDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadInventoryHealth" title="刷新库存数据">↻</i>
				</div>
				
				<!-- 库存健康度图表 -->
				<view class="chart-container">
					<qiun-data-charts type="radar" :opts="inventoryHealthChartOpts" :chartData="inventoryHealthChartData" />
				</view>
				<uni-popup ref="showInventoryHealthDetail" height="auto" width="auto" type="center" title="库存健康度图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								<div class="inventory-health" >
									<div class="inventory-item"
									@click="pageSend.directory='',pageSend.slowDay='',pageSend.name = '商品列表',pageSend.id= '',$refs.pageGoods.open()"
									>
										<div class="inventory-label">总库存价值</div>
										<div class="inventory-value">¥{{ (inventoryHealth.total_sales) }}</div>
									</div>
									<div class="inventory-item">
										<div class="inventory-label">库存周转率</div>
										<div class="inventory-value">{{ inventoryHealth.turnover_rate.toFixed(2) }} 次/月</div>
									</div>
									<div class="inventory-item">
										<div class="inventory-label">低库存商品</div>
										<div class="inventory-value">{{ inventoryHealth.low_stock_count }} 种</div>
									</div>
									<div class="inventory-item"
									@click="pageSend.directory='',pageSend.slowDay='90',pageSend.name = '90天内销量为0的商品',pageSend.id= '',$refs.pageGoods.open()"
									>
										<div class="inventory-label">滞销商品</div>
										<div class="inventory-value">{{ inventoryHealth.slow_moving_count }} 种</div>
									</div>
								</div>
							
							</view>
						</view>
					</view>
				</uni-popup>
				
			</div>
			
		</div>
	
		<!-- 待处理订单 - 热销商品 -->
		<div class="main-content">
			<!-- 第一列：待处理订单 -->
			<div class="section-card">
				<div class="section-header">
					<h3>待处理订单 <span class="badge">{{ pendingOrders.total_count }}</span>
						<text class="info-icon" @tap="showInfo('说明', '显示需要您立即处理的客户订单')">?</text>
					</h3>
					<div  class="link" style="color:#0437ff"
					@click="$refs.showPendingOrdersDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadPendingOrders" title="刷新待处理订单">↻</i>
				</div>
				
				<!-- 待处理订单图表 -->
				<view class="chart-container">
					<qiun-data-charts type="column" :opts="pendingOrdersChartOpts" :chartData="pendingOrdersChartData" />
				</view>
				<uni-popup ref="showPendingOrdersDetail" height="auto" width="auto" wi type="center" title="待处理订单图表">
				
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								<table v-if="pendingOrders.orders!=undefined && pendingOrders.orders.length>0">
									<!-- 表头 -->
									<thead>
										<tr >
											<th  class="centers ">
												
												序
											</th>
											<th class="centers">
												用户
											</th>
											<th  class="centers">
												状态
											</th>
											<th  class="centers" >
												时间
											</th>
										</tr>
									</thead>
									<tbody>
										
										<tr v-for="(order,index) in pendingOrders.orders" :key="index">
											<td selectable="true"   class="centers weight">
												{{ index+1 }}
											</td>
											<td selectable="true"  class="centers weight" >
												{{ order.user_name }}
											</td>
											<td selectable="true"   class="centers weight">
												{{ order.items_count }} 件商品
											</td>
											<td selectable="true"   class="centers weight">
												{{ formatTime(order.time) }}
											</td>
										</tr>
								
									</tbody>
								</table>
								<!-- 暂无数据 -->
								<empty v-if="pendingOrders.orders==undefined || pendingOrders.orders.length==0"></empty>
								<!-- end -->
							</view>
						</view>
					</view>
				
				</uni-popup>
			</div>

			<!-- 热销商品 -->
			<div class="section-card top-selling">
				<div class="section-header">
					<h3>热销商品TOP10 
						<text class="info-icon" @tap="showInfo('说明', '展示不同时间范围内最受欢迎的商品')">?</text>
					</h3>
					<select v-model="salesPeriod" @change="loadTopSelling">
						<option value="today">今日</option>
						<option value="month">本月</option>
						<option value="3month">最近3个月</option>
					</select>
					<div  class="link" style="color:#0437ff"
					@click="$refs.showTopSellingDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadTopSelling" title="刷新热销商品数据">↻</i>
				</div>

				<!-- 热销商品图表 -->
				<view class="chart-container">
					<qiun-data-charts type="bar" :opts="topSellingChartOpts" :chartData="topSellingChartData" />
				</view>
				
				<uni-popup ref="showTopSellingDetail" height="auto" width="auto"  type="center" title="热销商品图表">
					
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								
								<table v-if="topProducts!=undefined && topProducts.length>0">
									<thead>
										<tr>
											<th>商品名称</th>
											<th>销售量</th>
											<th>销售额</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(product, index) in topProducts" :key="index">
											<td 
											@click="pageSend.directory='',pageSend.slowDay='',pageSend.name = product.name,pageSend.id= product.id,$refs.pageGoods.open()"
											>{{ product.name }}</td>
											<td>{{ product.total_count }}</td>
											<td>¥{{ (product.total_sales) }}</td>
										</tr>
									</tbody>
								</table>
								<empty v-if="topProducts==undefined || topProducts.length==0"></empty>
							</view>
						</view>
					</view>
					
				</uni-popup>
			</div>
        
		</div>
	  
	  
		<!-- 应收账款卡片 - 应付账款 -->
		<div class="main-content">
			<!-- 第一列：应收账款卡片 -->
			<div class="section-card">
				<div class="section-header">
					<h3>应收账款<span class="amount">¥{{ (receivables.total_sales) }}</span></h3>
					<div class="link" 
					@click="userPageSend.name = '应收账款',userPageSend.id= '',userPageSend.sort='moneyDesc',$refs.pageUser.open()"
					>查看全部</div>
					
					<div  class="link" style="color:#0437ff"
					@click="$refs.showReceivablesDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadReceivables" title="刷新应收账款数据">↻</i>
				</div>
				
				<!-- 应收账款图表 -->
				<view class="chart-container">
					<qiun-data-charts type="pie" :opts="receivablesChartOpts" :chartData="receivablesChartData" />
				</view>
				
				<uni-popup ref="showReceivablesDetail" height="auto" width="auto" wi type="center" title="应收账款卡片">
					
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								<table v-if="receivables.receivables!=undefined && receivables.receivables.length>0">
									<!-- 表头 -->
									<thead>
										<tr >
											<th  class="centers ">
												
												序
											</th>
											<th class="centers">
												用户
											</th>
											<th  class="centers">
												数量
											</th>
											<th  class="centers" >
												时间
											</th>
										</tr>
									</thead>
									<tbody>
										
										<tr v-for="(debt,index) in receivables.receivables" :key="index">
											<td selectable="true"   class="centers weight">
												{{ index+1 }}
											</td>
											<td selectable="true"  class="centers weight" @click="userPageSend.name = debt.user_name,userPageSend.id= debt.user_id,userPageSend.sort='',$refs.pageUser.open()">
												{{ debt.user_name }}
											</td>
											<td selectable="true"   class="centers weight">
												¥{{ (debt.total_sales) }}
											</td>
											<td selectable="true"   class="centers weight">
												最后订单: {{ debt.last_order }}
											</td>
										</tr>
								
									</tbody>
								</table>
								<!-- 暂无数据 -->
								<empty v-if="receivables.receivables==undefined || receivables.receivables.length==0"></empty>
								<!-- end -->
							</view>
						</view>
					</view>

				</uni-popup>
			</div>

			<!-- 第二列：应付账款 -->
			<div class="section-card">
				<div class="section-header">
					<h3>应付账款 <span class="amount">¥{{ (payables.total_sales) }}</span></h3>
					
					
					<div  class="link" style="color:#0437ff"
					@click="$refs.showPayablesDetail.open()"
					>详细数据</div>
					
					<i class="refresh-icon" @click="loadPayables" title="刷新应付账款数据">↻</i>
				</div>
				
				<!-- 应付账款图表 -->
				<view class="chart-container">
					<qiun-data-charts type="pie" :opts="payablesChartOpts" :chartData="payablesChartData" />
				</view>
				<uni-popup ref="showPayablesDetail" height="auto" width="auto" type="center" title="应付账款图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100" >
								<table v-if="payables.payables!=undefined && payables.payables.length>0">
									<!-- 表头 -->
									<thead>
										<tr >
											<th  class="centers ">
												
												序
											</th>
											<th class="centers">
												用户
											</th>
											<th  class="centers">
												数量
											</th>
											<th  class="centers" >
												时间
											</th>
										</tr>
									</thead>
									<tbody>
										
										<tr v-for="(debt,index) in payables.payables" :key="index">
											<td selectable="true"   class="centers weight">
												{{ index+1 }}
											</td>
											<td selectable="true"  class="centers weight" @click="userPageSend.name = debt.user_name,userPageSend.id= debt.user_id,userPageSend.sort='',$refs.pageUser.open()">
												{{ debt.user_name }}
											</td>
											<td selectable="true"   class="centers weight">
												¥{{ (debt.total_sales) }}
											</td>
											<td selectable="true"   class="centers weight">
												最后订单: {{ debt.last_order }}
											</td>
										</tr>
								
									</tbody>
								</table>
								<!-- 暂无数据 -->
								<empty v-if="payables.payables==undefined || payables.payables.length==0"></empty>
								<!-- end -->
							</view>
						</view>
					</view>
					
				</uni-popup>
			</div>
		</div>

		<!-- 客户价值分析 品类销售分析  供应商绩效看板 -->
		<div class="main-content" style=" grid-template-columns: repeat(3, 1fr);">
			<!-- 客户价值分析 -->
			<div class="section-card customer-value">
				<div class="section-header">
					<h3>客户价值分层 (ABC分析) 
					  <text class="info-icon" @tap="showInfo('说明', '根据客户贡献价值将客户分为A、B、C三类')">?</text>
					</h3>
					
					<div  class="link" style="color:#0437ff"
					@click="$refs.showCustomerValueDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadCustomerValue" title="刷新客户价值数据">↻</i>
				</div>
			  
				<!-- 客户价值分析图表 -->
				<view class="chart-container">
					<qiun-data-charts type="ring" :opts="customerValueChartOpts" :chartData="customerValueChartData" />
				</view>
				<uni-popup ref="showCustomerValueDetail" height="auto" width="auto" type="center" title="客户价值分析图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100">
								<div class="customer-categories" >
									<!-- A类客户 -->
									<div class="category category-a">
										<h4 title="累计销售额达到公司总销售额的前70%">
											<i class="el-icon-star-on"></i> A类客户 (核心客户)
											<span class="category-summary">TOP {{customers.filter(c => c.category === 'A').length}} 位</span>
										</h4>
										<div class="customer-list">
											<div v-for="c in customers.filter(c => c.category === 'A')" :key="c.name" class="customer-item">
												<div class="customer-main">
													<div class="customer-name"
													@click="userPageSend.name = c.name,userPageSend.id= c.id,userPageSend.sort='',$refs.pageUser.open()"
													>{{ c.name }}</div>
													<div class="customer-stats">
														<span class="stat">
															<span class="stat-label">总消费:</span>
															<span class="stat-value">¥{{ c.total_sales }}</span>
														</span>

													</div>
												</div>
												<div class="customer-secondary">
													<div class="stat-small">
														<span class="stat-label">占比:{{ c.percentage.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">累计占比:{{ c.cumulative_percent.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">开单数:{{ c.order_count }}单</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									
									<!-- B类客户 -->
									<div class="category category-b">
										<h4 title="累计销售额在70%-90%之间">
											<i class="el-icon-star-off"></i> B类客户 (潜力客户)
											<span class="category-summary">TOP {{customers.filter(c => c.category === 'B').length}} 位</span>
										</h4>
										<div class="customer-list">
											<div v-for="c in customers.filter(c => c.category === 'B')" :key="c.name" class="customer-item">
												<div class="customer-main">
													<div class="customer-name"
													@click="userPageSend.name = c.name,userPageSend.id= c.id,userPageSend.sort='',$refs.pageUser.open()"
													>{{ c.name }}</div>
													<div class="customer-stats">
														<span class="stat">
															<span class="stat-label">总消费:</span>
															<span class="stat-value">¥{{c.total_sales}}</span>
														</span>

													</div>
												</div>
												<div class="customer-secondary">
													<div class="stat-small">
														<span class="stat-label">占比:{{ c.percentage.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">累计占比:{{ c.cumulative_percent.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">开单数:{{ c.order_count }}单</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									
									<!-- C类客户 -->
									<div class="category category-c">
										<h4 title="剩下的10%销售额贡献者">
											<i class="el-icon-user"></i> C类客户 (普通客户)
											<span class="category-summary">TOP {{customers.filter(c => c.category === 'C').length}} 位</span>
										</h4>
										<div class="customer-list">
											<div v-for="c in customers.filter(c => c.category === 'C')" :key="c.name" class="customer-item">
												<div class="customer-main">
													<div class="customer-name"
													@click="userPageSend.name = c.name,userPageSend.id= c.id,userPageSend.sort='',$refs.pageUser.open()"
													>{{ c.name }}</div>
													<div class="customer-stats">
														<span class="stat">
															<span class="stat-label">总消费:</span>
															<span class="stat-value">¥{{ c.total_sales }}</span>
														</span>

													</div>
												</div>
												<div class="customer-secondary">
													<div class="stat-small">
														<span class="stat-label">占比:{{ c.percentage.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">累计占比:{{ c.cumulative_percent.toFixed(1) }}%</span>
													</div>
													<div class="stat-small">
														<span class="stat-label">开单数:{{ c.order_count }}单</span>
													</div>
												</div>
											</div>
									  </div>
									</div>
									
								</div>
							</view>
						</view>
					</view>
				</uni-popup>
			</div>

			<!-- 品类销售分析 -->
			<div class="section-card category-sales">
				<div class="section-header">
					<h3 >品类销售分析 
						<text class="info-icon" @tap="showInfo('说明', '分析不同商品类别的销售表现和占比')">?</text>
					</h3>
					<div class="time-range-selector">
						<select v-model="categorySalesRange" @change="loadCategorySales">
							<option value="1month">近30天</option>
							<option value="3month">最近3个月</option>
							<option value="6month">最近6个月</option>
							<option value="year">今年</option>
						</select>
						<div  class="link" style="color:#0437ff"
						@click="$refs.showCategorySalesDetail.open()"
						>详细数据</div>
						<i class="refresh-icon" @click="loadCategorySales" title="刷新品类销售数据">↻</i>
					</div>
				</div>
			 
				<!-- 品类销售分析图表 -->
				<view class="chart-container">
					<qiun-data-charts type="pie" :opts="categorySalesChartOpts" :chartData="categorySalesChartData" />
				</view>
				
				<uni-popup ref="showCategorySalesDetail" height="auto" width="auto" type="center" title="品类销售分析图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100">
								<div class="scroll-container">
									<table class="sales-table">
										<thead>
										   <tr>
											 <th>品类名称</th>
											 <th>商品数量</th>
											 <th>销售数量</th>
											 <th>销售额</th>
											 <th>品类占比</th>
										   </tr>
										</thead>
										<tbody>
											<tr v-for="(cat,index) in categories" :key="index">
												<td
												@click="pageSend.name = cat.name,pageSend.id= '',pageSend.slowDay='',pageSend.directory= cat.id,$refs.pageGoods.open()"
												>{{ cat.name }}</td>
												<td>{{ cat.product_count || 0 }}</td>
												<td>{{ cat.total_quantity || 0 }}</td>
												<td>¥{{ ((cat.total_sales || 0)) }}</td>
												<td>
													<div class="percentage-bar">
														<div class="bar-fill" :style="{ width: (cat.total_sales / totalCategorySales) * 100 + '%' 
														}"></div>
														<span class="percentage-text">
														   {{ (totalCategorySales > 0 ? (cat.total_sales / totalCategorySales * 100).toFixed(1) : 0) }}%
														</span>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</view>
						</view>
					</view>
				</uni-popup>
		   </div>
			
			<!-- 供应商绩效看板 -->
			<view class="section-card  " style="max-height: fit-content;">
				<div class="section-header">
				   <h3 >供应商绩效TOP10 
						<text class="info-icon" @tap="showInfo('说明', '评估供应商的交货时间、退货率和供货表现')">?</text>
					</h3>
				   <picker :range="filterOptions" @change="filterChange" :value="currentFilter">
						<text>排序: {{filterOptions[currentFilter]}}</text>
				   </picker>
					<div  class="link" style="color:#0437ff"
					@click="$refs.showSupplierPerformanceDetail.open()"
					>详细数据</div>
					<i class="refresh-icon" @click="loadSupplierPerformance" title="刷新供应商绩效数据">↻</i>
				</div>
			   
				<!-- 供应商绩效图表 -->
				<view class="chart-container">
					<qiun-data-charts type="radar" :opts="supplierPerformanceChartOpts" :chartData="supplierPerformanceChartData" />
				</view>
			    <uni-popup ref="showSupplierPerformanceDetail" height="auto" width="auto" type="center" title="供应商绩效图表">
					<view class="box-infos font12">
						<view class="content-box">
							<view class="boxsss100">
								<view class="supplier-list scroll-container" >
									<view v-for="(supplier, index) in sortedSuppliers" :key="index">
										<view class="supplier-card">
											<view class="supplier-header">
												<text class="rank">{{index + 1}}</text>
												<text class="name">{{supplier.supplier_name}}</text>
												<view :class="['badge', 'badge-' + supplier.performance_grade.toLowerCase()]">
													{{supplier.performance_grade}}
												</view>
											</view>
											
											<view class="metrics">
												<view class="metric">
													<text class="label">订单量</text>
													<text class="value">{{supplier.order_count}}</text>
												</view>
												<view class="metric">
													<text class="label">交易额</text>
													<text class="value">¥{{supplier.total_sales}}</text>
												</view>
												<view class="metric">
													<text class="label">平均交货</text>
													<text class="value">{{supplier.avg_delivery_days.toFixed(1)}}天</text>
												</view>
												<view class="metric">
													<text class="label">退回率</text>
													<text class="value" :class="{'warning': supplier.return_rate > 5}">
														{{supplier.return_rate.toFixed(1)}}%
													</text>
												</view>
											</view>
											
										</view>
										<view class="score">
											<text>绩效得分: {{supplier.performance_score.toFixed(1)}}/100</text>
											<view class="score-bar">
												<view 
												  class="score-fill" 
												  :style="{width: supplier.performance_score + '%'}"
												  :class="'fill-' + supplier.performance_grade.toLowerCase()"
												></view>
											</view>
										</view>
										
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>
			
		</div>
		
		<!-- 滞销商品预警 -->
		<div class="section-card slow-selling">
			<div class="section-header">
				<h3>滞销商品预警 (近3个月) 
					<text class="info-icon" @tap="showInfo('说明', '识别销售缓慢的商品，可进行调价或促销')">?</text>
				</h3>
			
				<div  class="link" 
				@click="pageSend.directory='',pageSend.slowDay='90',pageSend.name = '90天内销量为0的商品',pageSend.id= '',$refs.pageGoods.open()"
				>查看全部</div>
				<div  class="link" style="color:#0437ff"
				@click="$refs.showSlowSellingDetail.open()"
				>详细数据</div>
				<i class="refresh-icon" @click="loadSlowSelling" title="刷新滞销商品数据">↻</i>
			</div>
			
			<!-- 滞销商品预警图表 -->
			<view class="chart-container">
				<qiun-data-charts type="column" :opts="slowSellingChartOpts" :chartData="slowSellingChartData" />
			</view>
			
			<uni-popup ref="showSlowSellingDetail" height="auto" width="auto" type="center" title="滞销商品预警图表">

				<view class="box-infos font12">
					<view class="content-box">
						<view class="boxsss100">
							<div class="scroll-container">  <!-- 增加滚动容器 -->
								<table class="sales-table">
									<thead>
										<tr>
											<th>商品名称</th>
											<th>库存量</th>
											<th>近3月销量</th>
											<th>库存预警</th>
											<th>操作</th>
										</tr>
								  </thead>
									<tbody>
										<tr v-for="(product, index) in slowSellingProducts" :key="index" 
											:class="{'warning-row': product.sales_count <= 5}">
											<td
											@click="pageSend.directory='',pageSend.slowDay='',pageSend.name = product.name,pageSend.id= product.id,$refs.pageGoods.open()"
											>{{ product.name }}</td>
											<td>{{ product.stock }}</td>
											<td>{{ product.sales_count }}</td>
											<td>{{ product.alert_level }}</td>
											<td>
												<view class="flex">
													<button class="btn-action" 
													@click="pageSend.directory='',pageSend.slowDay='',pageSend.name = product.name,pageSend.id= product.id,$refs.pageGoods.open()"
													>调价</button>
												</view>
											</td>
										</tr>
										<tr v-if="slowSellingProducts.length === 0">
											<td colspan="5" class="no-data">无滞销商品</td>
										</tr>
									</tbody>
								</table>
							</div>
						</view>
					</view>
				</view>
			</uni-popup>
		</div>

		<!-- 加载状态 -->
		<div v-if="loading" class="loading-overlay">
			<div class="loading-spinner"></div>
			<div class="loading-text">数据加载中...</div>
		</div>
    </div>
	<!-- 信息提示弹窗 -->
	<uni-popup ref="infoPopup" type="dialog" minHeight="auto" minWidth="auto" title="提示">
		<uni-popup-dialog title="提示"  :content="infoContent" confirmText="确定"></uni-popup-dialog>
	</uni-popup>
	<!-- 商品页面 -->
	<uni-popup ref="pageGoods" type="center" :title="pageSend.name">
		<goods :isPop="false" 
		:OnPageSearchGoodsId="pageSend.id" 
		:OnPageSearchDirectory="pageSend.directory" 
		:OnPageSearchSlowDay="pageSend.slowDay"
		class="h100"></goods>
	</uni-popup>
	<!-- end -->
	<!-- 用户页面 -->
	<uni-popup ref="pageUser" type="center" :title="userPageSend.name">
		<user :isPop="false" 
		:OnPageSearchUserId="userPageSend.id" 
		:OnSort="userPageSend.sort"
		status="firm_user_list" class="h100"></user>
	</uni-popup>
	<!-- end -->

	<!-- 详细单据 -->
	<uni-popup ref="orderMoney" type="center" :title="orderPageSend.name" height="90%" width="90%">
		<order_money
		:isPopup="true"
		:start_date="orderPageSend.start_date" 
		:end_date="orderPageSend.end_date" 
		:onIsprint="orderPageSend.isprint" 
		:onAccomplish="orderPageSend.accomplish" 
		:onRoute="orderPageSend.route" 
		:supplier="orderPageSend.supplier" 
		onAccomplish="2"
		class="page-boxs h100"
		></order_money>
	</uni-popup>
	<!-- end -->
  </view>
</template>

<script>
	import goods from "@/components/goods/goods.vue"
	import user from "@/components/user/list.vue"
	import empty from "@/components/admin-components/empty.vue"
export default {
	components: {
		goods,user,empty
	},
	beforeCreate(){
		this.$options.components.order_money = require('@/components/admin-components/order_money.vue').default 
	},
	data() {
		return {

			// 图表配置和数据
			routeSalesChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "线路销售分布",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			routeSalesChartData: {},
			
			inventoryHealthChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "库存健康度",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					radar: {
						gridType: "radar",
						gridColor: "#CCCCCC",
						gridCount: 3,
						opacity: 0.2,
						max: 100,
						labelShow: true
					}
				}
			},
			inventoryHealthChartData: {},
			
			pendingOrdersChartOpts: {
				color: ["#1890FF"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "待处理订单",
					fontSize: 15,
					color: "#666666"
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				}
			},
			pendingOrdersChartData: {},
			
			topSellingChartOpts: {
				color: ["#1890FF"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "热销商品TOP10",
					fontSize: 15,
					color: "#666666"
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					bar: {
						type: "stack",
						width: 30,
						activeBgColor: "#333333",
						activeBgOpacity: 0.08
					}
				}
			},
			topSellingChartData: {},
			
			receivablesChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "应收账款",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			receivablesChartData: {},
			
			payablesChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "应付账款",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			payablesChartData: {},
			
			customerValueChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "客户价值分层",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					pie: {
						ringWidth: 30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			customerValueChartData: {},
			
			categorySalesChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "品类销售分析",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: false,
						borderWidth: 3,
						borderColor: "#FFFFFF"
					}
				}
			},
			categorySalesChartData: {},
			
			supplierPerformanceChartOpts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#EA7CCC"],
				padding: [5, 5, 5, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "供应商绩效",
					fontSize: 15,
					color: "#666666"
				},
				extra: {
					radar: {
						gridType: "radar",
						gridColor: "#CCCCCC",
						gridCount: 3,
						opacity: 0.2,
						max: 100,
						labelShow: true
					}
				}
			},
			supplierPerformanceChartData: {},
			
			slowSellingChartOpts: {
				color: ["#EE6666"],
				padding: [15, 15, 0, 5],
				enableScroll: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center"
				},
				title: {
					name: "滞销商品预警",
					fontSize: 15,
					color: "#666666"
				},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				}
			},
			slowSellingChartData: {},
			
			orderStatusType:{},
			orderStatusTypeCustomDateRange: [],
			orderStatusTypeRange: 'yesterday', // 默认昨日
			orderStatusTypeOptions:['今日','昨日','本月','历史总计'],
			orderStatusTypeCurrent: 1,
			
			pageSend:{
				name:'',
				id:'',
				directory:'',//指定目录的商品
				slowDay:'',//滞销商品
			},
			userPageSend:{
				name:'',
				id:'',
				sort:'',
			},
			orderPageSend:{
				name:'',
				start_date:'',//搜索时间的范围
				end_date:'',//搜索时间的范围
				isprint:'',
				accomplish:'',
				route:'',
			},
			routes: [],
			summary: {},
			timeRanges: [
				{ value: 'today', label: '今日' },
				{ value: 'yesterday', label: '昨日' },
				{ value: 'month', label: '本月' },
				{ value: 'quarter', label: '最近三个月' },
				{ value: 'all', label: '历史合计' }
			],
			currentTimeRange: { value: 'yesterday', label: '昨日' },
			sortField: 'total_sales',
			sortOrder: 'DESC',
			infoContent:'',
			// 新增订单统计数据
			orderStats: {
			  total_orders: 0,
			  total_sales: 0,
			  avg_order_value: 0,
			  active_customers: 0
			},
			orderStatsRange: 'yesterday', // 默认昨日
			customDateRange: [],

			loading: true,
			summaryData: [
				{ title: '客户总数', value: '--' },
				{ title: '员工总数', value: '--' },
				{ title: '供应商', value: '--' },
				{ title: '待审核', value: '--' },
				{ title: '商品总数', value: '--' },
			],
			pendingOrders: {
				total_count: 0,
				orders: []
			},
			topProducts: [],
			receivables: {
				total_sales: 0,
				receivables: []
			},
			payables: {
				total_sales: 0,
				payables: []
			},
			routeSales: [],
			slowSellingProducts: [],
			inventoryHealth: {
				total_products: 0,
				low_stock_count: 0,
				total_sales: 0,
				turnover_rate: 0,
				slow_moving_count: 0
			},

    
			customers: [],
			categories: [],
			suppliers: [],
			totalCategorySales: 0,
			salesPeriod: 'month',
	  
			// 新增品类销售时间范围选择
			categorySalesRange: '1month',
		
			suppliers: [],
			filterOptions: ['订单量', '交易额', '退货率', '绩效得分', '交货时间'],
			currentFilter: 0,
			sortOrder: 'desc'
    };
  },

	mounted() {
		this.loadAllData();
	},
    computed: {
		
		sortedSuppliers() {
			const sorted = [...this.suppliers];
			const sortField = this.getSortField();
        
			sorted.sort((a, b) => {
			  // 确定排序方向
			  const multiplier = this.sortOrder === 'asc' ? 1 : -1;
			  
			  if (sortField === 'return_rate') {
				// 退货率特殊处理 - 越低越好
				return (a.return_rate - b.return_rate) * multiplier;
			  } else if (sortField === 'avg_delivery_days') {
				// 交货时间特殊处理 - 越短越好
				return (a.avg_delivery_days - b.avg_delivery_days) * multiplier;
			  } else {
				// 其他字段正常排序
				return (b[sortField] - a[sortField]) * multiplier;
			  }
			});
        
			return sorted;
		}
    },
	methods: {
		// 数据转换方法 - 将API数据转换为图表数据格式
		convertToChartData(data, type, options = {}) {
			let chartData = {};
			
			switch(type) {
				case 'pie':
					chartData = {
						series: [{
							data: data.map(item => ({
								name: item.name,
								value: item.value
							}))
						}]
					};
					break;
					
				case 'column':
				case 'bar':
					chartData = {
						categories: data.map(item => item.name),
						series: [{
							name: options.seriesName || "数量",
							data: data.map(item => item.value)
						}]
					};
					break;
					
				case 'radar':
					chartData = {
						categories: data.map(item => item.name),
						series: [{
							name: options.seriesName || "数值",
							data: data.map(item => item.value)
						}]
					};
					break;
					
				case 'ring':
					chartData = {
						series: [{
							data: data.map(item => ({
								name: item.name,
								value: item.value
							}))
						}]
					};
					break;
			}
			
			return chartData;
		},
		
		async loadOrderStatusType() {
		    let params = { range: this.orderStatusTypeRange };
		    
		    if (this.orderStatusTypeRange === 'custom' && this.orderStatusTypeCustomDateRange && this.orderStatusTypeCustomDateRange.length === 2) {
		      params.start_date = this.orderStatusTypeCustomDateRange[0] / 1000;
		      params.end_date = this.orderStatusTypeCustomDateRange[1] / 1000;
		    }
		    
		    const res = await this.getData('getOrderStatus', params);
		    
		      this.orderStatusType = res;
		 
		},
		orderStatusTypeRangeChange(e){
			const idx = e.detail.value;
			if(idx == 0){
				this.orderStatusTypeRange = 'today'
			}
			else if(idx == 1){
				this.orderStatusTypeRange = 'yesterday'
			}
			else if(idx == 2){
				this.orderStatusTypeRange = 'month'
			}
			else if(idx == 3){
				this.orderStatusTypeRange = 'all'
			}
			this.orderStatusTypeCurrent = idx;
			this.loadOrderStatusType()
		},
		
		openOrderPages(type){
			
			var value = this.orderStatsRange
			var title = '';
			
			if(value == 'today'){
				title = '今日'
			}
			else if(value == 'yesterday'){
				title = '昨日'
			}
			else if(value == 'month'){
				title = '本月'
			}
			else if(value == 'all'){
				title = '历史总计'
				
			}else{
				title = '历史总计'
			}
			var t_title = '';
			
			if(type == 1){
				t_title = '合计订单'
			}else{
				t_title = '异常订单'
			}
			
			this.orderPageSend.name       = `${title}的${t_title}`;
			this.orderPageSend.isprint    = ''
			this.orderPageSend.accomplish = '2'
			this.orderPageSend.route    = ''
			this.orderPageSend.supplier   = '0'
			this.orderPageSend.start_date = this.orderStats.date.start
			this.orderPageSend.end_date   = this.orderStats.date.end
			
			this.$refs.orderMoney.open()
		},
		changeTimeRange(e) {
	        const index = e.detail.value;
	        this.currentTimeRange = this.timeRanges[index];
	        this.loadRouteSales();
		},
	      
		changeSort(field) {
	        if (this.sortField === field) {
	          this.sortOrder = this.sortOrder === 'DESC' ? 'ASC' : 'DESC';
	        } else {
	          this.sortField = field;
	          this.sortOrder = 'DESC';
	        }
	        this.loadRouteSales();
		},
	      
		getActivityLevel(level) {
	        const map = {
	          '高活跃度': 'high',
	          '中活跃度': 'medium',
	          '低活跃度': 'low',
	          '无订单': 'none'
	        };
	        return map[level] || 'none';
		},
	      // 格式化金额
		formatNumber(num) {
	        if (num === null || num === undefined) return '0.00';
	        
	        // 如果金额以分为单位，除以100
	        const actualAmount = num ;
	        
	        return actualAmount.toLocaleString('zh-CN', {
	          minimumFractionDigits: 2,
	          maximumFractionDigits: 2
	        });
		},
	      
	    // 格式化日期
	    formatDate(dateString) {
	        if (!dateString) return '-';
	        
	        const date = new Date(dateString);
	        return date.toLocaleDateString('zh-CN', {
	          year: 'numeric',
	          month: '2-digit',
	          day: '2-digit'
	        });
	    },

	    filterChange(e) {
	        const idx = e.detail.value;
	        
	        // 如果用户选择的是当前正在排序的字段，则切换排序方向
	        if (idx === this.currentFilter) {
	          this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
	          this.sortOrder = 'desc';
	        } else {
	          // 默认按降序排序
	          this.sortOrder = 'desc';
	        }
	        
	        this.currentFilter = idx;
	    },
	      
	    getSortField() {
	        switch (this.currentFilter) {
	          case 0: return 'order_count';
	          case 1: return 'total_sales';
	          case 2: return 'return_rate';
	          case 3: return 'performance_score';
	          case 4: return 'avg_delivery_days';
	          default: return 'order_count';
	        }
	    },
	      
	    formatNumber(num) {
			var tmpNum = Number(num)
	        if (tmpNum >= 10000) {
	          return (tmpNum / 10000).toFixed(1) + 'W';
	        } else if (tmpNum >= 1000) {
	          return (tmpNum / 1000).toFixed(1) + 'K';
	        } else if (tmpNum <0) {
	          return tmpNum ;
	        }
	        return tmpNum.toFixed(2);
	    },
		showInfo(source, purpose) {
			this.infoContent = `作用: ${purpose}`
			this.$refs.infoPopup.open()
		},
	    // 新增订单统计加载方法
	    async loadOrderStatistics() {
	      try {
	        let params = { range: this.orderStatsRange };
	        
	        if (this.orderStatsRange === 'custom' && this.customDateRange && this.customDateRange.length === 2) {
	          params.start_date = this.customDateRange[0] / 1000;
	          params.end_date = this.customDateRange[1] / 1000;
	        }
	        
	        const res = await this.getData('getOrderStatistics', params);
	        
	          this.orderStats = {
				price_abnormal_orders:res.price_abnormal_orders || 0,
	            total_orders: res.total_orders || 0,
	            total_sales: res.total_sales || 0,
	            avg_order_value: res.avg_order_value || 0,
	            active_customers: res.active_customers || 0,
				date:res.date
	          };
	      } catch (error) {
	        console.error('订单统计数据加载失败:', error);
	        this.$message.error('订单统计数据加载失败');
	      }
	    },
		async loadAllData() {
			this.loading = true;
      
			try {
				await this.loadCoreData();
				await this.loadPendingOrders();
				await this.loadTopSelling();
				await this.loadReceivables();
				await this.loadPayables();
				await this.loadOrderStatusType();
				await this.loadRouteSales();
				await this.loadSlowSelling();
				await this.loadInventoryHealth();
				await this.loadCustomerValue();
				await this.loadCategorySales();
				await this.loadSupplierPerformance();
				await this.loadOrderStatistics(); // 新增
				
			} catch (error) {
				this.$message.error('数据加载失败，请重试');
			} finally {
				this.loading = false;
			}
		},
    
		async loadCoreData() {
			const res = await this.getData('getCoreData');
			this.summaryData = [
				{ title: '客户总数', value: res.customer_count || 0 },
				{ title: '员工总数', value: res.staff_count || 0 },
				{ title: '供应商', value: res.supplier_count || 0 },
				{ title: '待审核', value: res.pending_count || 0 },
				{ title: '商品总数', value: res.goods_count || 0, 
				trend: res.no_image_count > 0 ? `${res.no_image_count}无图` : '' },
			];
		},
    
		async loadPendingOrders() {
			const res = await this.getData('getPendingOrders');
			this.pendingOrders = {
				total_count: res.total_count || 0,
				orders: res.orders || []
			};
			
			// 更新待处理订单图表数据
			const chartData = this.convertToChartData(
				res.orders.map(order => ({
					name: order.user_name,
					value: order.items_count
				})),
				'column',
				{ seriesName: '商品数量' }
			);
			this.pendingOrdersChartData = chartData;
		},
    
		async loadTopSelling() {
			const res = await this.getData('getTopSelling', { range: this.salesPeriod });
			this.topProducts = res.products || [];
			
			// 更新热销商品图表数据
			const chartData = this.convertToChartData(
				res.products.map(product => ({
					name: product.name,
					value: product.total_count
				})),
				'bar',
				{ seriesName: '销售量' }
			);
			this.topSellingChartData = chartData;
		},
		
		async loadPayables() {
			const res = await this.getData('getPayables');
			this.payables = {
				total_sales: res.total_sales || 0,
				payables: res.payables || []
			};
			
			// 更新应付账款图表数据
			const chartData = this.convertToChartData(
				res.payables.map(payable => ({
					name: payable.user_name,
					value: payable.total_sales
				})),
				'pie'
			);
			this.payablesChartData = chartData;
		},
		
		async loadReceivables() {
			const res = await this.getData('getReceivables');
			this.receivables = {
				total_sales: res.total_sales || 0,
				receivables: res.receivables || []
			};
			
			// 更新应收账款图表数据
			const chartData = this.convertToChartData(
				res.receivables.map(receivable => ({
					name: receivable.user_name,
					value: receivable.total_sales
				})),
				'pie'
			);
			this.receivablesChartData = chartData;
		},
    
		async loadRouteSales() {
			const params = {
				time_range: this.currentTimeRange.value,
				sort: this.sortField,
				order: this.sortOrder
			};
			const res = await this.getData('getRouteSales', params);

			this.routeSales = res.routes || [];
			this.routes = res.routes;
			this.summary = res.summary;
			
			// 更新线路销售分布图表数据
			const chartData = this.convertToChartData(
				res.routes.map(route => ({
					name: route.route_name,
					value: route.total_sales
				})),
				'pie'
			);
			this.routeSalesChartData = chartData;
		},
    
		async loadSlowSelling() {
			const res = await this.getData('getSlowSelling');
			this.slowSellingProducts = res.products || [];
			
			// 更新滞销商品预警图表数据
			const chartData = this.convertToChartData(
				res.products.map(product => ({
					name: product.name,
					value: product.stock
				})),
				'column',
				{ seriesName: '库存量' }
			);
			this.slowSellingChartData = chartData;
		},
    
		async loadInventoryHealth() {
			try {
				const res = await this.getData('getInventoryHealth');
				this.inventoryHealth = {
					total_products: parseInt(res.total_products) || 0,
					low_stock_count: parseInt(res.low_stock_count) || 0,
					total_sales: parseInt(res.total_sales) || 0,
					// 确保turnover_rate是数字类型
					turnover_rate: parseFloat(res.turnover_rate) || 0,
					slow_moving_count: parseInt(res.slow_moving_count) || 0
				};
				
				// 更新库存健康度图表数据
				const chartData = {
					categories: ['总库存价值', '库存周转率', '低库存商品', '滞销商品'],
					series: [{
						name: '库存指标',
						data: [
							this.inventoryHealth.total_sales / 1000, // 缩放以便在图表中显示
							this.inventoryHealth.turnover_rate * 10, // 放大以便在图表中显示
							this.inventoryHealth.low_stock_count,
							this.inventoryHealth.slow_moving_count
						]
					}]
				};
				this.inventoryHealthChartData = chartData;
			} catch (error) {
				console.error('库存健康度数据加载失败:', error);
			}
		},
    
    
		async loadCustomerValue() {
			const res = await this.getData('getCustomerValue');
			this.customers = res.customers || [];
			
			// 更新客户价值分析图表数据
			const aCount = this.customers.filter(c => c.category === 'A').length;
			const bCount = this.customers.filter(c => c.category === 'B').length;
			const cCount = this.customers.filter(c => c.category === 'C').length;
			
			const chartData = this.convertToChartData([
				{ name: 'A类客户', value: aCount },
				{ name: 'B类客户', value: bCount },
				{ name: 'C类客户', value: cCount }
			], 'ring');
			
			this.customerValueChartData = chartData;
		},
    
		async loadCategorySales() {
			try {
				// 传递时间范围参数给后端
				const res = await this.getData('getCategorySales', {
				range: this.categorySalesRange
			});
			
			this.categories = res.categories || [];
			
			// 计算总销售额
			this.totalCategorySales = this.categories.reduce((sum, cat) => {
				return sum + (parseInt(cat.total_sales) || 0);
			}, 0);
			
			// 更新品类销售分析图表数据
			const chartData = this.convertToChartData(
				res.categories.map(category => ({
					name: category.name,
					value: category.total_sales
				})),
				'pie'
			);
			this.categorySalesChartData = chartData;
			} catch (error) {
				console.error('品类销售数据加载失败:', error);
				this.categories = [];
				this.totalCategorySales = 0;
			}
		},
		
		async loadSupplierPerformance() {
			try {
				const res = await this.getData('getSupplierPerformance');
				this.suppliers = (res.suppliers || []).map(s => {
				  // 确保所有数值字段都是数字类型
				  return {
					...s,
					order_count: parseInt(s.order_count) || 0,
					total_sales: parseInt(s.total_sales) || 0,
					avg_delivery_days: parseFloat(s.avg_delivery_days) || 0,
					return_count: parseInt(s.return_count) || 0
				  };
				});
			
				// 增加供应商评级
				this.suppliers.forEach(s => {
				  // 根据退货率和交货时间评级
				  if (s.return_count === 0 && s.avg_delivery_days <= 2) {
					s.rating = 'A';
				  } else if (s.return_count <= 2 && s.avg_delivery_days <= 5) {
					s.rating = 'B';
				  } else {
					s.rating = 'C';
				  }
				});
				
				// 更新供应商绩效图表数据
				const chartData = {
					categories: ['订单量', '交易额', '平均交货', '退回率'],
					series: this.suppliers.slice(0, 5).map(supplier => ({
						name: supplier.supplier_name,
						data: [
							supplier.order_count,
							supplier.total_sales / 1000, // 缩放以便在图表中显示
							supplier.avg_delivery_days,
							supplier.return_rate
						]
					}))
				};
				this.supplierPerformanceChartData = chartData;
			} catch (error) {
				console.error('供应商绩效数据加载失败:', error);
				this.suppliers = [];
			}
		},
    
		getProgressWidth(amount) {
			if (!amount || amount <= 0) return '0%';
		  
			const maxAmount = Math.max(...this.routeSales.map(r => r.total_sales || 0));
			if (maxAmount <= 0) return '0%';
		  
			return `${(amount / maxAmount) * 100}%`;
		},
    
		formatTime(timestamp) {
			const date = new Date(timestamp * 1000);
			return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		},
    
		
    

		

    
		
    
		getData(type, params = {}) {
			return new Promise((resolve, reject) => {
			this.$common.get_request(
			  { type, ...params },
			  (res) => {
				resolve(res);
			  },
			  (err) => {
				reject(err);
			  },
			  true,
			  this.$common.baseUrl.host + '/api/api/dashboard.php'
			);
		  });
		}
  }
};
</script>

<style scoped>
	/* 新增图表容器样式 */
	.chart-container {
		height: 300px;
		margin-bottom: 15px;
		border-radius: 8px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}
	
	/* 响应式设计 */
	@media (max-width: 992px) {
	  .customer-list {
	    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	  }
	  
	  .chart-container {
		  height: 250px;
	  }
	}
	
	@media (max-width: 768px) {
	  .customer-list {
	    grid-template-columns: 1fr;
	  }
	  
	  .customer-main {
	    flex-direction: column;
	    align-items: flex-start;
	    gap: 8px;
	  }
	  
	  .customer-stats {
	    width: 100%;
	    text-align: left;
	  }
	  
	  .customer-name {
	    max-width: 100%;
	  }
	  
	  .chart-container {
		  height: 200px;
	  }
	}
	
	@media (max-width: 480px) {
	  .stat-small .stat-label {
	    font-size: 10px;
	  }
	  
	  .stat-small .stat-value {
	    font-size: 11px;
	  }
	}
/* 全局容器 */
.dashboard-container {
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  position: relative;
  color: #333;
  background-color: #f5f7fa;
  overflow: auto;
  width: 100%;
}

/* 顶部数据概览 */
.data-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}



.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.customer-secondary {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.stat-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 5px;
  background: rgba(245, 247, 250, 0.8);
  border-radius: 4px;
  font-size: 13px;
}
.stat-small .stat-label {
  font-size: 11px;
  color: #909399;
}

.stat-small .stat-value {
  font-size: 12px;
  font-weight: bold;
}

.stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.stat-title {
  font-size: 13px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
  color: #67C23A;
}

/* 主体内容区域 */
.main-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* 通用卡片样式 */
.section-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}


.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 20px;
}
.section-header h3 {
  font-size: 18px;
  color: #303133;
  margin: 0;
  display: flex;
  align-items: center;
  flex:1;
}

.badge {
  background: #f56c6c;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
}

.amount {
  color: #f56c6c;
  font-weight: bold;
  margin-left: 5px;
}



.warning-card {
  align-items: center;
  background: #fef0f0;
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid #f56c6c;
  text-align: center;
}


/* 待处理订单 */
.order-list {
	height: calc(100% - 47px);
	overflow-y: auto;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.order-item:last-child {
  border-bottom: none;
}

.order-id {
  width: 80px;
  color: #909399;
  font-size: 13px;
}

.order-customer {
  flex: 1;
  font-weight: 500;
}

.order-items {
  width: 100px;
  text-align: center;
  color: #606266;
}

.order-time {
  width: 120px;
  color: #909399;
  font-size: 13px;
}

.btn-process {
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.3s;
}

.btn-process:hover {
  background: #66b1ff;
}

/* 应收账款 */
.debt-list {
	overflow-y: auto;
	height: calc(100% - 47px);
}

.debt-item {
  display: flex;
  align-items: center;
  padding: 10px ;
  border-bottom: 1px solid #f0f0f0;
}

.debt-item:last-child {
  border-bottom: none;
}

.debt-customer {
  flex: 1;
  font-weight: 500;
}

.debt-info {
  width: 150px;
  text-align: right;
}

.debt-amount {
  font-weight: bold;
  color: #f56c6c;
}

.debt-date {
  font-size: 12px;
  color: #909399;
}


/* 销售表格 */
.sales-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sales-table th {
  background-color: #f5f7fa;
  padding: 10px 8px;
  text-align: left;
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
}

.sales-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
}

.sales-table tbody tr:hover {
  background-color: #f9f9f9;
}

/* 库存健康度 */
.inventory-health {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.inventory-item {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.inventory-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 5px;
}

.inventory-value {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

/* 客户价值分析 */
.customer-value {
  max-height: fit-content;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.customer-value .customer-categories {
  display: flex;
  /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
  gap: 20px;
}



.category-a {
  border-left: 3px solid #67c23a;
}

.category-b {
  border-left: 3px solid #409eff;
}

.category-c {
  border-left: 3px solid #e6a23c;
}
.category-summary {
  margin-left: auto;
  font-size: 13px;
  color: #909399;
}
.el-icon-star-on {
  color: #67c23a;
  margin-right: 8px;
}
.el-icon-star-off {
  color: #409eff;
  margin-right: 8px;
}
.category h4 {
  display: flex;
  align-items: center;
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #606266;
}
.customer-categories h4 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #333;
}

.customer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  max-height: 250px;
  overflow: auto;
}

.customer-item {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.customer-item:hover {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.customer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.customer-name {
  font-weight: bold;
  font-size: 15px;
  color: #303133;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.customer-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.customer-stats span {
  font-size: 13px;
}

/* 品类销售分析 */
.percentage-bar {
  position: relative;
  height: 24px;
  background: #3c76ff;
  border-radius: 4px;
}

.bar-fill {
  height: 100%;
  background: #409EFF;
  border-radius: 4px;
}

.percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: fit-content;
}

/* 供应商绩效看板 */
.supplier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.supplier-card {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 15px;
  border-left: 4px solid #67C23A;
  display: flex;
  width: calc(100% - 30px);
}

.supplier-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex:1;
}



.supplier-card.rating-b .supplier-rating {
  background: #409EFF;
}

.supplier-card.rating-c .supplier-rating {
  background: #909399;
}



/* 线路销售分布 */
.route-list {
  max-height: 300px;
  overflow-y: auto;
}

.route-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.route-item:last-child {
  border-bottom: none;
}

.route-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.route-name {
  font-weight: 500;
}

.route-stats {
  display: flex;
  gap: 15px;
}

.route-stats span {
  color: #606266;
}

.progress-bar {
  height: 8px;
  background: #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #409EFF;
  border-radius: 4px;
  transition: width 0.5s;
}

/* 滞销商品 */
.warning-row {
  background-color: #fef0f0;
}

.warning-row:hover {
  background-color: #fee;
}

.btn-action {
  background: #e6a23c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0px 10px;
  cursor: pointer;
  font-size: 12px;
  margin: 2.5px;
}

/* 排序控件 */
.sort-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-controls select {
  padding: 5px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
}

/* 加载状态 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.customer-categories {
  display: flex;
  /* flex-direction: column; */
  gap: 20px;
}
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409EFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 15px;
  color: #606266;
  font-size: 14px;
}



/* 新增品类销售选择器样式 */
.time-range-selector {
  display: flex;
  align-items: center;
}

.time-range-selector select {
  padding: 5px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
}
/* 滚动容器样式 */
.scroll-container {
	width: 100%;
	overflow-y: auto;
	margin-top: 10px;
}

/* 供应商绩效卡片 */
 .supplier-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
  padding: 5px; /* 增加内边距 */
}

/* 线路销售卡片 */
.route-sales .route-list {
  padding: 5px; /* 增加内边距 */
}

/* 滞销商品卡片 */
.slow-selling .sales-table {
  width: 100%;
}

/* 表格滚动优化 */
.slow-selling .scroll-container {
  overflow-x: auto; /* 增加水平滚动 */
}

/* 订单统计卡片样式 */
.order-statistics {
  margin-bottom: 20px;
}

.order-stats-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  border-left: 3px solid #409EFF;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  min-width: 50px;
}


.order-trend-chart {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  border: 1px solid #ebeef5;
}

.chart-placeholder {
  display: flex;
  height: 200px;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 10px;
}

.trend-bar {
  width: 40px;
  background: #409EFF;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.5s ease;
}

.bar-value {
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.bar-label {
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #606266;
}

.chart-title {
  text-align: center;
  font-weight: 500;
  color: #303133;
}

.date-range-picker {
  margin-left: 10px;
  display: inline-block;
}



/* 响应式调整 */
@media (max-width: 1200px) {
  .order-stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .order-stats-container {
    grid-template-columns: 1fr;
  }
  
  .time-range-selector {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .date-range-picker {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
  }
}
/* 信息图标样式 */
.info-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  background: #f5f7fa;
  border-radius: 50%;
  font-size: 12px;
  margin-left: 8px;
  color: #909399;
  cursor: pointer;
}

/* 信息提示工具提示 */
.info-tooltip {
  position: absolute;
  width: 300px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 1000;
  display: none;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
}

.info-icon:hover .info-tooltip {
  display: block;
}

/* 刷新按钮样式 */
.refresh-icon {
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  transition: transform 0.3s;
  margin-left: 10px;
}

.refresh-icon:hover {
  transform: rotate(180deg);
}
  .info-icon {
    width: 32rpx;
    height: 32rpx;
    background: #409EFF;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 32rpx;
    font-size: 24rpx;
    margin: 0 16rpx;
  }

  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 15rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
  }
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
  }
  
  picker {
    padding: 8rpx 16rpx;
    background-color: #f1f3f6;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #606266;
  }
  
  .supplier-list {
    margin-bottom: 40rpx;
  }
  

  
  .supplier-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #f1f3f6;
    padding-bottom: 15rpx;
  }
  
  .rank {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: bold;
    color: #fff;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 15rpx;
  }
  
  .name {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
    flex: 1;
  }
  

  
  .badge-a { background: linear-gradient(to right, #67c23a, #8fd460); }
  .badge-b { background: linear-gradient(to right, #409eff, #79bbff); }
  .badge-c { background: linear-gradient(to right, #e6a23c, #f0c78a); }
  .badge-d { background: linear-gradient(to right, #f56c6c, #f89898); }
  
  .metrics {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 15rpx;
    justify-content: space-between;
	flex: 1;
  }
  
  .metric {
    width: 48%;
    margin-bottom: 20rpx;
    padding: 12rpx;
    background-color: #f8f9fa;
    border-radius: 10rpx;
  }
.category {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.3s;
  flex: 1;
}
  .label {
    font-size: 26rpx;
    color: #909399;
    margin-bottom: 5rpx;
    display: block;
  }
  
  .value {
    font-size: 30rpx;
    color: #303133;
    font-weight: bold;
  }
  
  .value.warning {
    color: #f56c6c;
  }
  
  .score {
    font-size: 26rpx;
    color: #909399;
    margin-top: 15rpx;
  }
  
  .score-bar {
    height: 16rpx;
    background: #ebeef5;
    border-radius: 10rpx;
    margin-top: 10rpx;
    overflow: hidden;
  }
  
  .score-fill {
    height: 100%;
    border-radius: 10rpx;
  }
  
  .fill-a { background: linear-gradient(90deg, #67c23a, #85ce61); }
  .fill-b { background: linear-gradient(90deg, #409eff, #79bbff); }
  .fill-c { background: linear-gradient(90deg, #e6a23c, #ebb563); }
  .fill-d { background: linear-gradient(90deg, #f56c6c, #f89898); }
  
  /* 前三名样式 */
  .supplier-card:nth-child(1) .rank {
    background-color: #ffb242;
  }
  
  .supplier-card:nth-child(2) .rank {
    background-color: #909399;
  }
  
  .supplier-card:nth-child(3) .rank {
    background-color: #c77d53;
  }
  
  /* 悬停效果 */
  .supplier-card:active {
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.1);
    transition: all 0.2s ease;
  }
  .category:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
  /* 财务卡片整体布局 */
  .finance-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin: 20px 0;
  }
  
  .finance-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
  }
  
  .finance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(90deg, #f8f9fa, #f1f3f6);
    border-bottom: 1px solid #ebeef5;
  }
  
  .finance-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  .finance-total {
    font-size: 20px;
    font-weight: bold;
    color: #e6a23c;
  }
  
  /* 应付账款总额使用不同颜色 */
  .finance-card:nth-child(2) .finance-total {
    color: #67c23a;
  }
  
  .finance-content {
    padding: 20px;
  }
  
  .badge-count {
    display: inline-block;
    padding: 4px 12px;
    background: #f0f7ff;
    border-radius: 14px;
    font-size: 13px;
    color: #409eff;
    margin-bottom: 15px;
  }
  
  /* 列表项样式 */
  .customer-item, .supplier-item {
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border-left: 3px solid #409eff;
    transition: all 0.3s;
  }
  
  .supplier-item {
    border-left-color: #67c23a;
  }
  
  .customer-item:hover, .supplier-item:hover {
    background: #f0f7ff;
    /* transform: translateX(5px); */
  }
  
  /* TOP排名特殊样式 */
  .top1 {
    border-left-width: 5px;
    border-left-color: #ffba00;
  }
  .top2 {
    border-left-color: #a9a9a9;
  }
  .top3 {
    border-left-color: #cd7f32;
  }
  
  .customer-name, .supplier-name {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 10px;
  }
  
  .debt-amount, .payable-amount {
    font-size: 18px;
    font-weight: bold;
    color: #f56c6c;
    display: flex;
    align-items: center;
  }
  
  .payable-amount {
    color: #67c23a; /* 应付账款使用绿色 */
  }

  
  .last-order {
    font-size: 13px;
    color: #909399;
    display: flex;
    align-items: center;
    margin-top: 5px;
  }
  
  .el-icon-time {
    margin-right: 5px;
  }
  
  .view-more {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    color: #409eff;
    cursor: pointer;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s;
  }
  
  .view-more:hover {
    background: #f0f7ff;
  }
  
  .view-more i {
    transition: transform 0.3s;
  }
  
  .view-more:hover i {
    transform: translateX(3px);
  }
  .link{
	margin-left: 10px;
	cursor: pointer;
	text-decoration: underline;
  }

  .route-sales {
    padding: 20rpx;
  }
  
  .time-filter {
    margin-bottom: 20rpx;
  }
  
  .filter-item {
    display: inline-flex;
    align-items: center;
    padding: 8rpx 16rpx;
    background: #f5f7fa;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #606266;
  }
  
  .summary-card {
    display: flex;
    background: #fff;
    border-radius: 12rpx;
    /* padding: 20rpx; */
    gap: 20px;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  }
  
  .summary-item {
    flex: 1;
    text-align: center;
    display: flex;
  }
  
  .summary-item .label {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: auto;
        color: #909399;
        font-size: 12px;
  }
  
  .summary-item .value {
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
    display: block;
  }
  
  .sort-options {
    display: flex;
    justify-content: space-around;
    /* margin-bottom: 20rpx; */
  }
  
  .sort-option {
    font-size: 26rpx;
    color: #606266;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
  }
  
  .sort-option.active {
    background: #ecf5ff;
    color: #409eff;
    font-weight: bold;
  }
  
  .route-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  }
  
  .route-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .rank {
    font-size: 32rpx;
    font-weight: bold;
    color: #606266;
    margin-right: 15rpx;
  }
  
  .name {
    font-size: 30rpx;
    font-weight: bold;
    flex: 1;
  }
  
  .activity {
    padding: 6rpx 15rpx;
    border-radius: 20rpx;
    color: white;
    font-size: 24rpx;
  }
  
  .activity-high { background: #67c23a; }
  .activity-medium { background: #e6a23c; }
  .activity-low { background: #909399; }
  .activity-none { background: #f56c6c; }
  
  .metrics {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .metric {
    width: 33.33%;
    margin-bottom: 10rpx;
    display: flex;
    flex-direction: column;
  }
  
  .label {
    font-size: 24rpx;
    color: #909399;
  }
  
  .value {
    font-size: 26rpx;
    color: #303133;
    font-weight: bold;
  }
  .warning-desc{
		font-size: 12px;
		color: #909399;
  }
  .order-status-container{
		display: grid;
		gap: 15px;
		margin-bottom: 20px;
  }
		.boxsss100{
			/* display: flex; */
			width: 100%;
			flex-direction: inherit;
			align-items: inherit;
			/* padding: 0px 5px; */
			height: 100%;
			background-color: #fff;
			overflow: auto;
		}
</style>